<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Purple Admin</title>
    <link th:include="inc_css.html">
    <link th:include="inc.html">
</head>
<body style="">
<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-share"></i> 路由管理</h1>
            <p>该功能负责修改网关路由配置信息</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="javascript:return;">路由列表</a></li>
        </ul>
    </div>
    <div class="row" id="message" style="display:none">
        <div class="col-md-12">
            <div class="tile" th:style="'background:#'+${color}">
                <div class="tile-body" th:text="${message}" style="color: #FFFFFF"></div>
            </div>
        </div>
    </div>
    <div class="row" id="add" style="display:none">
        <div class="col-md-12">
            <div class="tile">
                <h3 class="tile-title">新增路由</h3>
                <form class="form-horizontal" action="/operation/saveGateway" method="post">
                    <div class="tile-body">
                        <div class="form-group row">
                            <label class="control-label col-md-3">转发标志</label>
                            <div class="col-md-8">
                                <input class="form-control col-md-8" type="text" placeholder="请填写转发标志eg:/user/**"
                                       name="path">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-3">分组</label>
                            <div class="col-md-8">
                                <input class="form-control col-md-8" type="text" placeholder="请填写分组" name="group">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-3">权重</label>
                            <div class="col-md-8">
                                <input class="form-control col-md-8" type="text" placeholder="请输入0-100之间的数据"
                                       name="weight">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-3">转发地址</label>
                            <div class="col-md-8">
                                <input class="form-control col-md-8" type="text" placeholder="请填写转发地址eg:http://ip:port"
                                       name="uri">
                            </div>
                        </div>
                    </div>
                    <div class="tile-footer">
                        <div class="row">
                            <div class="col-md-8 col-md-offset-3">
                                <button class="btn btn-primary" type="submit"><i
                                        class="fa fa-fw fa-lg fa-check-circle"></i>新增
                                </button>&nbsp;&nbsp;&nbsp;<a class="btn btn-secondary" href="#" onclick="cancel()"><i
                                    class="fa fa-fw fa-lg fa-times-circle"></i>取消</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--<div class="clearix"></div>-->
    </div>
    <div class="row" id="update" style="display:none">
        <div class="col-md-12">
            <div class="tile">
                <h3 class="tile-title">修改路由</h3>
                <form class="form-horizontal" action="/operation/updateGateway" method="post" id="update_form">
                    <div class="tile-body">
                        <div class="form-group row">
                            <label class="control-label col-md-3">id</label>
                            <div class="col-md-8">
                                <input class="form-control col-md-8" type="text" value="" name="update_id"
                                       id="update_id"
                                       disabled="">
                                <input class="form-control col-md-8" type="hidden" value="" name="id" id="update_id_2">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-3">转发标志</label>
                            <div class="col-md-8">
                                <input class="form-control col-md-8" type="text" placeholder="请填写转发标志eg:/user/**"
                                       name="path" id="update_path">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-3">分组</label>
                            <div class="col-md-8">
                                <input class="form-control col-md-8" type="text" placeholder="请填写分组" name="group"
                                       id="update_group">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-3">权重</label>
                            <div class="col-md-8">
                                <input class="form-control col-md-8" type="text" placeholder="请输入0-100之间的数据"
                                       name="weight" id="update_weight">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-3">转发地址</label>
                            <div class="col-md-8">
                                <input class="form-control col-md-8" type="text" placeholder="请填写转发地址eg:http://ip:port"
                                       name="uri" id="update_uri">
                            </div>
                        </div>
                    </div>
                    <div class="tile-footer">
                        <div class="row">
                            <div class="col-md-8 col-md-offset-3">
                                <button class="btn btn-primary" type="submit"><i
                                        class="fa fa-fw fa-lg fa-check-circle"></i>修改
                                </button>
                                &nbsp;&nbsp;&nbsp;
                                <a class="btn btn-secondary" href="#" onclick="cancel()"><i
                                        class="fa fa-fw fa-lg fa-times-circle"></i>取消</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--<div class="clearix"></div>-->
    </div>
    <div class="row" id="list">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <div style="position: absolute;left:200px;top:15px;z-index: 1000">
                        <button class="btn btn-primary" type="button" style="margin-bottom:10px;" onclick="add()">新增
                        </button>
                    </div>
                    <table class="table table-hover table-bordered" id="sampleTable">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>转发标志</th>
                            <th>分组</th>
                            <th>权重</th>
                            <th>转发地址</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="route:${routes}">
                            <td th:text="${route.id}">Tiger Nixon</td>
                            <td th:text="${route.path}">System Architect</td>
                            <td th:text="${route.group}">Edinburgh</td>
                            <td th:text="${route.weight}">61</td>
                            <td th:text="${route.uri}">2011/04/25</td>
                            <td>
                                <!--<form action="/operation/deleteGateway" method="post" th:id="${route.id}">-->
                                <button class="btn-update btn-info" type="button"
                                        th:onclick="'update_info(\''+${route.id}+'\')'">修改
                                </button>
                                <!--<input type="hidden" th:value="${route.id}" name="delId">-->
                                <!--<button class="btn btn-info" type="button"-->
                                <!--th:onclick="'delGateway(\''+${route.id}+'\')'">删除-->
                                <!--</button>-->
                                <!--</form>-->
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- Data table plugin-->
<script type="text/javascript" src="js/plugins/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/plugins/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" th:inline="javascript">
    $('#sampleTable').DataTable();
    $(function () {
        $("#add").hide();
        $("#update").hide();
        $("#message").hide();

        var is_show = [[${is_show}]];
        if (is_show == 1) {
            $("#message").slideDown(1000);
            setTimeout(message_hide, 2000);
        }

    })

    //    function delGateway(id) {
    //        if (confirm("是否确认删除？")) {
    //            $("#" + id).submit();
    //        }
    //    }

    //隐藏消息
    function message_hide() {
        $("#message").slideUp(1000);
    }

    //添加路由
    function add() {
        $("#add").show();
        $("#list").hide();
    }

    //取消添加修改操作
    function cancel() {
        $("#add").hide();
        $("#update").hide();
        $("#list").show();
    }

    //获取修改信息
    function update_info(id) {
        $("#add").hide();
        $("#list").hide();
        $("#update").show();
        $("#update_id").val(id);
        //发送ajax请求
        $.ajax({
            type: "GET",
            data: {id: id},
            url: "/operation/routeById",
            success: function (data) {
                var obj = JSON.parse(data);
                $("#update_path").val(obj.path);
                $("#update_group").val(obj.group);
                $("#update_weight").val(obj.weight);
                $("#update_uri").val(obj.uri);
                $("#update_id_2").val(obj.id);
            },
            error: function () {
                alert("获取信息失败");
            }
        });
    }
</script>
</body>
</html>
